<template>
    <div class="charts">
        <v-chart :option="getOption()" autoresize></v-chart>
    </div>
</template>

<script setup lang="ts">
const getOption = ()=>{
    return{
        xAxis:{
            show:false,
            max:100,
            min:0
        },
        yAxis:{
            type:'category',
            show:false
        },
        series:{
            type:'bar',
            data:[33],
            // 柱状图的宽度
            barWidth:10,
            color:'yellowgreen',
            // 显示柱条的背景颜色
            showBackground:true,
            backgroundStyle:{
                color:'#ccc'
            },
            // 显示标签
            label:{
                show:true,
                position: 'right',
                color:'yellowgreen',
                formatter:'|'
            }
        },
        grid:{
            left:0,
            right:0,
            top:0,
            bottom:0
        },
        tooltip:{
            trigger: 'axis',
            axisPointer: {
                type: "cross"
            },
            show:true
        }
    }
}
</script>

<style scoped>
.charts{
    width: 100%;
    height: 100%;
}
</style>